<template>
	<view class="container">

		<view class="gui-h4 hulu-primary-blue gui-color-white gui-flex gui-justify-content-center
						 gui-align-items-center" style="text-align: center; height:88rpx;line-height:88rpx;">
			<text class="gui-icons gui-text-center gui-block gui-color-white gui-text"
				style="font-size:32rpx;">&#xe66c;</text>
			区域：{{area}}({{games.length}})
		</view>
		<view class="rank-list" v-if="games.length>0">
			<scroll-view :scroll-y="true" style="height:1000rpx;">
				<view class="gui-padding gui-flex gui-row gui-wrap gui-justify-content-start
				 gui-align-items-center">
					<view class="rank-item" v-for="(g,index) in games" :key="index">
						<view class="gui-flex gui-space-between gui-align-items-center">
							<text class="gui-color-white gui-text">编号:</text>
							<text class="" style="color:#ffcc19;font-style: italic;">
								{{g.ID}}
							</text>
							<text class=" gui-text-small gui-color-white">创建人：{{g.user_id}}</text>
							<text class="gui-text-small" style="color: springgreen;">{{g.state==0?'准备中':'进行中'}}</text>
						</view>
						<view style="margin-top:40rpx;">
							<view class="" v-if="user.ID==g.user_id">
								<button type="default" hover-class="gui-tap"
									class="gui-button gui-bg-green gui-noborder" @tap="enter(g)">
									<text class="gui-color-white gui-button-text">进入{{g.code}}</text>
								</button>
								<view class="" style="height:12rpx;">

								</view>
								<button type="default" hover-class="gui-tap" open-type="share"
									class="gui-button hulu-map-road2 gui-noborder" @tap="invitePlayer(g)">
									<text class="gui-color-white gui-button-text">邀请</text>
								</button>
							</view>

							<view class="" v-else>
								<button type="default" hover-class="gui-tap" class="gui-button gui-bg-red gui-noborder"
									@tap="validateUser(g)">
									<text class="gui-color-white gui-button-text">战斗{{g.code}}</text>
								</button>
								<view class="" style="height:12rpx;">

								</view>
								<button type="default" hover-class="gui-tap"
									class="gui-button gui-bg-purple gui-noborder" @tap="toLook(g)">
									<text class="gui-color-white gui-button-text">围观</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="gui-padding-x gui-flex gui-justify-content-center
						gui-align-items-center" v-else style="height:1000rpx;">
			<text class="gui-icons gui-block gui-text gui-color-brown" style="font-size: 240rpx;">&#xe644;</text>
		</view>
		<view class="gui-margin-top gui-padding-x">
			<button type="default" class="gui-button gui-bg-purple gui-noborder" @tap="startup">
				<text class="gui-color-white gui-button-text">新开局</text>
			</button>
		</view>
		<u-popup :show="showCode" style="width:600rpx" :round="2" @close="closePop" mode="center" :closeable="true">
			<view style="width:600rpx;height:300rpx;box-sizing: border-box;" class="gui-padding">
				<view class="gui-text-center">
					<text class="gui-text">请输入邀请码</text>
				</view>
				<view class="gui-bg-gray gui-dark-bg-level-1">
					<input type="number" class="gui-form-input gui-border gui-padding-small" v-model="invitecode" focus
						placeholder="数字邀请码" />
				</view>
				<view class="gui-margin-top">
					<button type="default" class="gui-button gui-bg-purple gui-noborder" @tap="joinGame">
						<text class="gui-color-white gui-button-text">确定</text>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/api/request.js'
	import {
		useUserStore
	} from '@/store/user.js'
	import graceJS from "@/Grace6/js/grace.js";
	const useUser = useUserStore()
	const WELLCOME_BACK = 1005
	export default {
		data() {
			return {
				games: [],
				game: {},
				area: "",
				user: useUser.getUser(),
				area_id: null,
				qr: null,
				invitecode: null,
				showCode: false,
				audio: null,
			}
		},
		onLoad(opt) {
			this.area_id = opt.id
			//缓存area_id
			uni.setStorageSync("area_id", this.area_id)
		},
		onReady: function() {

		},
		onUnload() {
			if (this.audio) {
				this.audio.stop()
			}
		},
		created() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShow() {
			this.getGames()
			if (this.audio) {
				console.log("onshow 存在")
				this.audio.play()
			} else {
				console.log("onshow 不存在，创建")
				this.audio = uni.$hl.createHlAudio('ready', true, false)
				this.audio.play()
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(() => {
				this.getGames()
				uni.stopPullDownRefresh();
			}, 500);
		},
		onShareAppMessage(res) {
			console.log(res)
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '来一起围观吧',
				path: `/subpages/battle/battle?game_id=${this.game_id}&area_id=${this.area_id}&action=join`
			}
		},
		methods: {
			invitePlayer(game) {
				console.log(game)
			},
			closePop() {
				this.showCode = false
				this.invitecode = null
			},
			validateUser(game) {
				this.game = game
				this.showCode = true;
			},
			async joinGame() {
				if (!this.invitecode) {
					return uni.showToast({
						icon: "none",
						title: "邀请码不为空"
					})
				}
				if (this.game.code == this.invitecode) {
					uni.showToast({
						icon: "success",
						title: "验证完成"
					})
					//发送网络请求，表名
					const {
						code
					} = await request.get(`game/${this.game.ID}/join`)
					if (code != -1) {
						//执行跳转
						this.showCode = false
						this.invitecode = null;
						uni.showToast({
							icon: "none",
							title: "欢迎回来",
							duration: 2000,
							complete: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: `/subpages/battle/battle?area_id=${this.area_id}&game_id=${this.game.ID}&action=join`,
										success: () => {
											this.audio.stop()
										}
									})
								}, 500)
							}
						})
					}
				} else {
					return uni.showToast({
						icon: "none",
						title: "验证码错误"
					})
				}
			},
			enter(game) {
				//如果是我自己创建的游戏，直接进入
				uni.navigateTo({
					url: `/subpages/battle/battle?area_id=${this.area_id}&game_id=${game.ID}&action=own`,
					success: () => {
						this.audio.stop()
					}
				})
			},
			invite(game) {

			},
			async getGames() {
				const {
					data,
					area
				} = await request.get(`area/${this.area_id}/games`)
				this.games = data
				this.area = area
			},
			async startup() {
				await request.post(`game`, {
					"area_id": this.area_id
				})
				await this.getGames()
			},
			toLook(game) {
				uni.navigateTo({
					url: `/subpages/battle/battle?area_id=${this.area_id}&game_id=${game.ID}&action=look`,
					success: () => {
						this.audio.stop()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #eccc68;
		box-sizing: border-box;
		position: relative;

		.rank-list {
			width: 750rpx;
			height: 1000rpx;
			text-align: center;
			background-color: #eccc68;

			.rank-item {
				text-align: center;
				padding: 10rpx;
				box-sizing: border-box;
				margin: 30rpx auto;
				width: 300rpx;
				height: 300rpx;
				background-color: rgb(153, 105, 35);
			}
		}

		.create-btn-container {
			position: absolute;
			bottom: 100rpx;
			width: 750rpx;
			height: 180rpx;
			line-height: 180rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.invite-container {
		height: 600rpx;
		background-color: white;
		border-radius: 30rpx;
		padding: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.invite-header {
			text-align: center;
			font-size: 32rpx;
		}

		.invite-line {
			width: 100%;
			height: 4rpx;
			background-color: #ededed;
			margin: 10rpx 0;
		}

		.invite-image {
			width: 300rpx;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.invite-code {
			font-size: 32rpx;
			font-weight: 600;
			margin: 20rpx 0;
		}

		.invite-btn {
			width: 500rpx;
			color: white;
			background-color: rgba(74, 170, 248, 1);
		}
	}
</style>